<style lang="scss" scoped>
.follow {
  z-index: 99;
  position: absolute;
  right: 20px;
  top: 60px;
  img {
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>

<template>
  <div>
    <van-nav-bar title="医生详情" left-text="" left-arrow @click-left="router.back()" />
    <!-- 关注 -->
    <div class="follow" @click="follow">
      <img
        v-if="doctorData.followFlag == 1"
        src="../../images/icon/no-follow.png"
        height="25"
        alt=""
      />
      <img v-else src="../../images/icon/follow.png" height="25" alt="" />
    </div>
    <div>
      <div class="head" style="display: flex; padding: 10px">
        <div class="left">
          <img :src="doctorData.imagePic" height="130" alt="" />
        </div>
        <div class="right" style="padding: 0 10px">
          <p>
            <span style="font-weight: 800; font-size: 16px">{{ doctorData.doctorName }}</span>
            <span style="margin-left: 15px">{{ doctorData.jobTitle }}</span>
          </p>
          <p>{{ doctorData.inauguralHospital }}</p>
          <p>
            <span>好评率 {{ doctorData.praise }}</span>
            <span>服务患者数 {{ doctorData.serverNum }}</span>
          </p>
          <p style="border-left: 3px solid rgb(0 137 255); font-weight: 800">&ensp;他收到的礼物</p>
          <p v-if="liveLength === 0 ">
            暂无礼物
            <!-- {{ liveLength === 0 ? '暂无礼物' : doctorData.doctorReceiveGiftList }} -->
          </p>
          <p v-else>
            <div style="display: flex; flex-wrap: wrap; item-align: center; justify-content: space-around">
              <p v-for="(item,index) in doctorData.doctorReceiveGiftList" :key="index" style="display: flex;flex-direction: column;align-items: center; width: 60px">
                <img :src="item.giftPic" height="50" alt="">
                <span>{{ item.receiveNum }}</span>
              </p>
            </div>
          </p>
        </div>
      </div>
      <div class="main" style="padding: 10px">
        <p
          style="
            border-left: 3px solid rgb(0 137 255);
            font-weight: 800;
            font-size: 16px;
            margin-top: 10px;
          "
        >
          &ensp;个人简历
        </p>
        <p style="margin: 8px 0; color: rgb(143 143 143)">
          {{ doctorData.personalProfile ? doctorData.personalProfile : '未完善个人简历' }}
        </p>
        <p
          style="
            border-left: 3px solid rgb(0 137 255);
            font-weight: 800;
            font-size: 16px;
            margin-top: 10px;
          "
        >
          &ensp;擅长领域
        </p>
        <p style="margin: 8px 0; color: rgb(143 143 143)">
          {{ doctorData.goodField ? doctorData.goodField : '暂无擅长领域' }}
        </p>
        <p
          style="
            border-left: 3px solid rgb(0 137 255);
            font-weight: 800;
            font-size: 16px;
            margin-top: 10px;
          "
        >
          &ensp;用户评价<span style="font-weight: 100; font-size: 12px"
            >({{ pinLength }}条评论)</span
          >
        </p>
        <div
          v-for="(item, index) in commentList"
          :key="index"
          style="padding: 10px 5px; border-bottom: 1px solid #ccc"
        >
          <div class="top" style="display: flex; align-items: center">
            <img :src="item.headPic" style="width: 40px; height: 40px; border-radius: 50%" alt="" />
            <span style="flex: 1; margin-left: 10px; font-size: 14px">{{ item.nickName }}</span>
            <span style="color: rgb(155 155 155)">{{ item.commentTime }}</span>
          </div>
          <div class="bottom" style="margin-top: 10px; font-size: 12px; color: rgb(143 143 143)">
            <p>{{ item.content }}</p>
          </div>
        </div>
        <p
          style="text-align: center; margin: 10px 0; color: rgb(0 137 255)"
          @click="goReview(doctorData.doctorId)"
        >
          点击查看更多评论
        </p>
      </div>
      <div
        class="footer"
        style="
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          background: #fff;
          border-top: 1px solid #ccc;
        "
      >
        <span
          style="flex: 1; font-size: 16px; font-weight: 800; text-align: center; line-height: 40px"
          >{{ doctorData.servicePrice }}H币/次</span
        >
        <el-button type="primary" size="large" @click="router.push('/chat')">立即咨询</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { request } from '../../axios/request'
import { useRouter, useRoute } from 'vue-router'
import { DoctorEvaluateList } from '../../api/index'
// 路由
const route = useRoute()
const router = useRouter()
const page = ref(1)
const count = ref(5)
// 关注
const follow = async () => {
  if (doctorData.value.followFlag == 2) {
    await request.post(
      '/api/health/user/inquiry/verify/v1/followDoctor',
      {
        doctorId: doctorId.value
      },
      {
        headers: {
          userId: userId.value as number,
          sessionId: sessionId.value as string,
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
    )
    getDoctor()
    ElMessage.success('关注成功')
    doctorData.value.followFlag = 1
  } else {
    await request.delete('/api/health/user/inquiry/verify/v1/cancelFollow', {
      params: {
        doctorId: doctorId.value
      },
      headers: {
        userId: userId.value as number,
        sessionId: sessionId.value as string,
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })
    getDoctor()
    ElMessage.error('取消关注')
    doctorData.value.followFlag = 2
  }
}

const doctorId = ref(route.query.doctorId)
console.log(doctorId.value)

// 医生评论详情
const goReview = (id: number) => {
  router.push({
    path: '/review',
    query: {
      id
    }
  })
}

// 拿取userId, sessionId
const userId = JSON.parse(localStorage.getItem('userId')|| '')
const sessionId = JSON.parse(localStorage.getItem('sessionId')|| '')

// 获取医生详情
const doctorData:any = ref('')
const commentList:any = ref('')
const liveLength = ref(0)
const pinLength = ref(0)
const getDoctor = async () => {
  await request
    .get('/api/health/user/inquiry/v1/findDoctorInfo', {
      params: {
        doctorId: doctorId.value
      },
      headers: {
        userId: userId as number,
        sessionId: sessionId as string
      }
    })
    .then((res) => {
      let { status, result } = res.data
      if (status === '0000') {
        doctorData.value = result
        commentList.value = doctorData.value.commentList
        liveLength.value = doctorData.value.doctorReceiveGiftList.length
        pinLength.value = doctorData.value.commentList.length
        result.commentList.forEach((item: any, index: number) => {
          console.log(item.commentTime)
          result.commentList[index].commentTime = dayjs(item.commentTime).format('YYYY-MM-DD')
        })
        console.log(doctorData.value)
      }
    })
}
getDoctor()
const getDoctorEvaluateList = async () => {
  const { data: res } = await DoctorEvaluateList({
    doctorId: doctorId.value,
    page: page.value,
    count: count.value
  })
  console.log(res)
}
getDoctorEvaluateList()
</script>